<template>
  <div id="app">
    <!-- 分数展示 -->
    <p>当前分数：{{ score }}</p>

    <!-- 根据分数显示开心或不开心的图片 -->
    <div>
      <img v-if="score >= 60" src="../assets/happy.png" alt="Happy Face">
      <img v-else src="../assets/sad.png" alt="Sad Face">
    </div>

    <!-- 按钮控制分数 -->
    <button @click="addScore">加10分</button>
    <button @click="reduceScore">减10分</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      score: 50 // 初始分数
    }
  },
  methods: {
    addScore() {
      this.score = Math.min(this.score + 10, 100); // 如果加10后超过100，则设为100
    },
    reduceScore() {
      this.score = Math.max(this.score - 10, 0); // 如果减10后低于0，则设为0
    }
  }
}
</script>

<style>
/* 添加一些基本样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>